.BlueOceanLogo,
.BlueOceanLogo:hover {
    display: flex;
    color: white;
    text-decoration: none;
    align-items: center;
    font-size: 18px;

    position:relative;
    top:-1px;  // To shift apparent text baseline up

    svg {
        height: 20px;
        fill: white;
        top: 1px;
        position:relative;
    }
}

.ContentPageHeader,
.ResultPageHeader {
    color:white;

    a, a:hover {
        color:white;
    }
}

.ContentPageHeader-user {

    display: flex;
    height: 100%;
    padding-left: 1em;

    * {
        margin-left: 1em;
    }

    .btn-sign-in {
        background: none;
        min-width: 0;
        border-color: rgba(0,0,0,0);
    }

    .btn-sign-in:hover {
        border-color: white;
    }

    .btn-sign-up {
        background: none;
        min-width: 0;
        border-color: white;
    }

    .user-component {
        display: inline-block;
        align-items: center;
        height: 100%;

        &.icon {
            padding-top: 13px;
            svg {
                fill: white;
                width: 24px;
                height: 24px;
            }
        }
        &.button-bar {
            padding-top: 11px;
        }
    }
}

.ResultPageHeader-run {
    padding-left: 1em;
    display:flex;
    align-items: center;

    &>*+* {
        margin-left: 1em;
    }

    button {
        min-width:0;
        color:white;
        border-color: white;
    }

    button:hover {
        color:white;
        border-color: white;
    }
}

.ContentPageHeader-main,
.ResultPageHeader-main {
    display:flex;
    align-items: center;
    height:100%;

    &>*+* {
        margin-left:10px;
    }
}

.ResultPageHeader-indicator {
    margin-right: 10px;
    height: 24px; // NFI why we need this :(
}

.ResultPageHeader-title {

    display:flex;
    align-items: center;

    a {
        text-decoration:underline;
    }
}

.ResultPageHeader-close {
    margin-left: 24px;
    cursor: pointer;
    stroke: none;
    fill: white;
    vertical-align: bottom;

    &:hover {
        stroke: white;
    }
}

/* TODO - move this out as soon as we fix the css loading issue */

.jenkins-pipeline-header {
    display: inline-block;
}

.TextInput.search-pipelines-input {
    background-color: transparent;
    background-repeat: no-repeat;
    margin-left: 20px;

    .TextInput-icon.u-icon-left {
        pointer-events: none;
        left: 0;

        path {
            fill: #ffffff;
        }
    }

    .clear-icon-container {
        display: none;
        text-align: center;
        cursor: pointer;
    }
    .fastsearch-input:not([value=""]) ~ .clear-icon-container {
        display: block;
        right: 0;

        .clear {
            width: 16px;
            path {
                fill: rgba(255, 255, 255, 0.5)
            }
        }
    }

    @supports (-ms-ime-align:auto) {
        .fastsearch-input ~ div.clear-icon-container.TextInput-icon { 
            display: none;
        } 
    }

    input.TextInput-control {
        width: 250px;
        border: none;
        color: #ffffff;
        font-size: 18px;
        padding-top: 10px;
        padding-right: 41px;
        padding-bottom: 10px;
        padding-left: 30px;
        cursor: pointer;

        &::-webkit-input-placeholder {
            color: transparent;
        }
        &::-moz-placeholder {
            color: transparent;
        }
        &:-ms-input-placeholder {
            color: transparent;
        }

        &:focus {
            padding-left: 30px;
            width: 250px;
            cursor: inherit;

            &::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.4);
            }
            &::-moz-placeholder {
                color: rgba(255, 255, 255, 0.4);
            }
            &:-ms-input-placeholder {
                color: rgba(255, 255, 255, 0.4);
            }
        }
    }
}

.no-search-results-container {
    text-align: center;
}

/* End of TODO */
